<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 94px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\frac{x}{y}" data-type="common"
				 data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_0_1.png"
				style="height: 36px;"></div>
<!--			<div class="equation-top-dom-item" @click="selectItem" data-code="\nicefrac{x}{y}" data-type="common"
				 data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_0_2.png"
				style="height: 36px;"></div>-->
			<div class="equation-top-dom-item" @click="selectItem" data-code="\sqrt{x}" data-type="common" data-poupe=""
				 data-key="" style="width: 36px;"><img class="equation-top-dom-item-image"
													   src="../../../assets/images/latex/cy_0_3.png"
													   style="height: 36px;"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\sqrt[x]{y}" data-type="common"
				 data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_0_4.png"
				style="height: 36px;"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 52px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="x^{y}" data-type="common" data-poupe=""
				 data-key="" style="width: 36px;"><img class="equation-top-dom-item-image"
													   src="../../../assets/images/latex/cy_1_1.png"
													   style="height: 36px;"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="x_{y}" data-type="common" data-poupe=""
				 data-key="" style="width: 36px;"><img class="equation-top-dom-item-image"
													   src="../../../assets/images/latex/cy_1_2.png"
													   style="height: 36px;"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 136px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\begin{pmatrix}x\end{pmatrix}"
				 data-type="common" data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_2_1.png"
				style="height: 36px;"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\begin{vmatrix}x\end{vmatrix}"
				 data-type="common" data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_2_2.png"
				style="height: 36px;"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\begin{bmatrix}x\end{bmatrix}"
				 data-type="common" data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_2_3.png"
				style="height: 36px;"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\begin{matrix}x\end{matrix}"
				 data-type="common" data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_2_4.png"
				style="height: 36px;"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\langle x \rangle" data-type="common"
				 data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_2_5.png"
				style="height: 36px;"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\langle x \rangle" data-type="common"
				 data-poupe="true" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_2_6.png"
				style="height: 36px;"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 136px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="+" data-type="common" data-poupe=""
				 data-key="">+
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="/" data-type="common" data-poupe=""
				 data-key="">/
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="×" data-type="common" data-poupe=""
				 data-key="">×
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\pm" data-type="common" data-poupe=""
				 data-key="">±
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="-" data-type="common" data-poupe=""
				 data-key="">-
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="÷" data-type="common" data-poupe=""
				 data-key="">÷
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 136px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leq" data-type="common" data-poupe=""
				 data-key="">≤
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cup" data-type="common" data-poupe=""
				 data-key="">∪
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\in" data-type="common" data-poupe=""
				 data-key="">∈
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cap" data-type="common" data-poupe=""
				 data-key="">∩
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nleq" data-type="common" data-poupe=""
				 data-key="">≰
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\subset" data-type="common" data-poupe=""
				 data-key="">⊂
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 136px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\pi" data-type="common" data-poupe=""
				 data-key="">π
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\phi" data-type="common" data-poupe=""
				 data-key="">ϕ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\infty" data-type="common" data-poupe=""
				 data-key="">∞
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\theta" data-type="common" data-poupe=""
				 data-key="">θ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\alpha" data-type="common" data-poupe=""
				 data-key="">α
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\beta" data-type="common" data-poupe=""
				 data-key="">β
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 52px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cancel{x}" data-type="common"
				 data-poupe="" data-key="" style="width: 36px;"><img
				class="equation-top-dom-item-image" src="../../../assets/images/latex/cy_6_4.png"
				style="height: 36px;"></div>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});

const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>

<style scoped lang="scss">

</style>
